<template>
  <div style="width: 100%; height: 100%">
    <el-button @click="move">move</el-button>
    <el-button @click="printInfo">print</el-button>
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup>
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import MultiPoint from 'ol/geom/MultiPoint';
import Polygon from 'ol/geom/Polygon';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';
import Icon from 'ol/style/Icon';
import Fill from 'ol/style/Fill';

import {defaults, Draw, Snap, Modify, Select} from "ol/interaction";
import {onMounted} from "vue";


// 普通图片URL
const imageUrl = '/img/bianpo.jpg';

// 图片大小
const size = [2440, 1728];

// 放大倍率
const multiplier = 10000 / 2;

// left-bottom right-top
const extent = [0, 0, size[0] * multiplier, size[1] * multiplier];
// center
const center = [extent[2] / 2, extent[3] / 2];

// 创建 ImageLayer 并添加到地图
const imageLayer = new ImageLayer({
    source: new ImageStatic({
        url: imageUrl,
        imageExtent: extent,
        imageSize: size,
    })
});

// 背景样式
let bg_style = new Style({
    stroke: new Stroke({
        color: 'blue',
        width: 1
    }),
    fill: new Fill({
        color: 'rgba(255, 255, 255, 0.5)'
    })
});

//背景数据
let bg_feature = new Feature({
    geometry: new Polygon([
        [[extent[0], extent[3]], [extent[0], extent[1]], [extent[2], extent[1]], [extent[2], extent[3]]]
    ])
});

bg_feature.setStyle(bg_style);

// 背景图层
let bg_vector = new LayerVector({
    source: new SourceVector()
});
bg_vector.getSource().addFeature(bg_feature);

// 数据
let pointVector = new LayerVector({
    source: new SourceVector()
});

// GNSS
// let icon ="";
// 钢筋计
// let icon ="";
// 倾角仪
let icon = "";

let background = "";

//样式
const pointStyle = (feature) => {

    return [
        new Style({
            //背景图标
            image: new Icon({
                src: background
            })
            // 文本样式
            , text: new Text({
                text: '传感器' + feature.get('name'),
                offsetY: '16',
                textAlign: "center",
                font: '12px serif',
                fill: new Fill({
                    color: '#FFF'
                })
                , backgroundFill: new Fill({
                    color: 'rgba(0, 0, 0, 1)', // 背景颜色
                }),
            })
        })
        , new Style({
            //背景图标
            image: new Icon({
                src: icon
                , anchorOrigin: 'top-center'
                , size: [30, 148]
                , scale: 0.5
            })
        })
    ]
}

const point_list = [
    {
        lat: 4187239.80,
        lon: 5234798.35,
        name: 'a',
        ref: undefined
    }
    , {
        lat: 6682144.40,
        lon: 5234798.35,
        name: 'b',
        ref: undefined
    }
    , {
        lat: 9186832.95,
        lon: 5234798.35,
        name: 'c',
        ref: undefined
    }
]

for (let i = 0; i < point_list.length; i++) {
    let item = point_list[i];
    const point = new Point([item.lat, item.lon]);

    pointVector.getSource().addFeature(new Feature({
        geometry: point,
        name: item.name
    }));
    item.ref = point;
}

pointVector.setStyle(pointStyle);

/**
 * 手动设置坐标
 */
const move = () => {
    point_list.forEach(item => {
        let location = item.ref.getCoordinates();
        location[0] = location[0] - 682144
        item.ref.setCoordinates(location);
    })
}

/**
 * 打印坐标
 */
const printInfo = () => {
    point_list.forEach(item => {
        console.log(item.ref.getCoordinates())
    })
}

/**
 * 允许编辑传感器点
 *
 * @type {Modify}
 */
const modify = new Modify({
    source: pointVector.getSource()
});

/**
 * 侦听图形坐标变化
 */
modify.on("modifyend", function (evt) {
    const feature = evt.features.item(0);
    console.log(feature)
});

onMounted(() => {
    let map = new Map({
        view: new View({
            center: center,
            zoom: 4
        }),
        layers: [
            imageLayer
            , bg_vector
            , pointVector
        ],
        target: 'map',
    });

    // 可编辑
    map.addInteraction(modify);

    // 鼠标点击事件
    map.on('click', function (evt) {
        let coordinate = evt.coordinate;
        console.log('click: ' + coordinate);
    });
})

</script>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>